<template>
  <div
    class="full-height bg-white page-content content padding-20 add-stock-in"
  >
    <!-- 设备信息 -->
    <q-form
      @submit="onSubmit"
      greedy
      @reset="onClear"
      ref="myForm"
      class="dialog-content form-inline block no-padding full-height"
    >
      <div style="height: calc(100% - 43px)" class="scrollbar overflow-auto">
        <card title="基本信息">
          <yz-input
            v-model.trim="queryParams.name"
            title="清单名称"
            class="q-mr-md"
            :rules="[0]"
            :maxlength="50"
          />
<!--          <yz-input-->
<!--            v-model.trim="queryParams.number"-->
<!--            title="清单编号"-->
<!--            class="q-mr-md"-->
<!--            :rules="[0]"-->
<!--            :maxlength="50"-->
<!--          />-->
        </card>
        <device-info
          title="设备信息"
          @getDevice="getDevice"
          ref="deviceInfo"
          :isShowWorkShop="false"
        ></device-info>
        <card title="备件清单">
          <q-btn
            slot="btn"
            outline
            color="primary"
            label="添加备件"
            @click="addTab"
          />
          <div class="page-content" style="max-height: 500px;width: 100%">
            <q-table
              :data="sparePartList"
              :columns="columns"
              row-key="id"
              style="margin: 0"
              class="myTable scroll stick-to-top"
              :loading="isTableLoading"
              :pagination.sync="pagination"
              :hide-bottom="sparePartList.length > 0"
              no-data-label="暂无数据"
              color="primary"
            >
              <template v-slot:body-cell-index="props">
                <q-td>
                  {{ props.row.__index + 1 }}
                </q-td>
              </template>
              <template v-slot:body-cell-operations="props">
                <q-td class="operations" style="width: 100px">
                  <div class="btn-group text-center">
                    <table-btn
                      btnType="delete"
                      @click="deleteItem(props.row.__index)"
                    />
                  </div>
                </q-td>
              </template>
            </q-table>
          </div>
        </card>
        <div class="q-mt-md" style="margin-left: -45px">
          <yz-input
            inputType="textarea"
            v-model="queryParams.remark"
            title="备注"
            :maxlength="100"
          />
        </div>
      </div>
      <q-separator class="qa-line" />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn
          outline
          label="取消"
          color="primary"
          type="reset"
          class="q-mr-md"
        />
        <q-btn unelevated label="确认" color="primary" type="submit" />
      </div>
    </q-form>
    <q-inner-loading :showing="isLoading" style="z-index: 99">
      <q-spinner-gears size="50px" color="primary" />
    </q-inner-loading>
    <select-spare-dialog
      :open="isShowSelectDialog"
      @close="isShowSelectDialog = false"
      @onSetCutter="onSetCutter"
      :cutterData="sparePartList"
      :isMultiple="true"
    />
  </div>
</template>

<script>
import STOCKBACKMIXIN from '../../inventory/stock-in/common/stock-back-mixin'
import DeviceInfo from 'src/pages/maintenance/maintenance-plan/common/device-info'
import Card from './card'
import SelectSpareDialog from '../../inventory/components/select-spare-dialog'
import { setSaveDeviceParts, getDevicePartById, updateDeviceParts } from 'src/boot/spare/parts'
import _ from 'lodash'
export default {
  name: 'add-parts-list',
  mixins: [STOCKBACKMIXIN],
  components: {
    SelectSpareDialog,
    DeviceInfo,
    Card
  },
  data () {
    return {
      isTableLoading: false,
      isShowSelectDialog: false,
      sparePartList: [],
      deviceList: [],
      isLoading: false,
      queryParams: {
        name: '',
        number: '',
        remark: ''
      },
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'number', label: '备件编号', align: 'left', field: 'number' },
        { name: 'name', label: '备件名称', align: 'left', field: 'name' },
        {
          name: 'categoryName',
          label: '所属分类',
          align: 'left',
          field: 'categoryName'
        },
        { name: 'spec', label: '规格', align: 'left', field: 'spec' },
        { name: 'unitName', label: '单位', align: 'left', field: 'unitName' },
        {
          name: 'operations',
          label: '操作',
          align: 'center',
          field: 'operations'
        }
      ]
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => { to.name === 'editPartsList' && vm.getEditDetail() })
  },
  methods: {
    onSubmit () {
      const params = {
        deviceList: this.deviceList.map(v => v.id),
        ...this.queryParams,
        sparePartList: this.sparePartList.map(v => v.id)
      }
      this.isLoading = true
      const URL = _.isEmpty(this.$route.query.id) ? setSaveDeviceParts : updateDeviceParts
      URL(params)
        .then(res => {
          res.success && this.$message.success('操作成功')
          this.isLoading = false
          this.onReset()
        })
        .catch(err => {
          this.isLoading = false
          console.log(err)
        })
      console.log(params)
    },
    onReset () {
      Object.assign(
        this.queryParams,
        this.$options.data.call(this).queryParams
      )
      this.deviceList = []
      this.sparePartList = []
      this.$refs.myForm.resetValidation()
      const member = _.isEmpty(this.$route.query.id) ? 'add' : 'edit'
      this.goPathName(`parts-list/${member}`, `partsList`, {})
    },
    onClear () {
      this.onReset()
    },
    addTab () {
      this.isShowSelectDialog = true
    },
    // 获取设备列表
    getDevice (val) {
      this.deviceList = val
    },
    deleteItem (index) {
      this.sparePartList.splice(index, 1)
    },
    onSetCutter (val) {
      this.isShowSelectDialog = false
      this.sparePartList = [...this.sparePartList, ...val]
    },
    // 格式化获取的数据
    setDetailData (val) {
      this.queryParams.name = val.name
      this.queryParams.number = val.number
      this.queryParams.remark = val.remark
      this.$set(this.queryParams, 'id', val.id)
      this.$refs.deviceInfo.initData(val?.devices.map(v => {
        return {
          ...v,
          id: v.deviceId,
          model: v.deviceModel,
          name: v.deviceName,
          assetNumber: v.deviceNumber
          // workShopName: v.workShopName,
        }
      }))
      this.sparePartList = val?.spareParts.map(v => {
        return {
          ...v,
          id: v.sparePartId,
          name: v.sparePartName,
          number: v.sparePartNumber,
          categoryName: v.sparePartCategory,
          spec: v.sparePartSpec,
          unitName: v.sparePartUnit
        }
      })
    },
    getEditDetail () {
      this.isLoading = true
      getDevicePartById(this.$route.query.id).then(res => {
        this.isLoading = false
        this.setDetailData(res.data)
      }).catch(err => {
        this.isLoading = false
        console.log(err)
      })
    }
  }
}
</script>

<style scoped></style>
